<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="登录">
        <meta name="description" content="用来登录学校官网">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .university {
                width:414Px;
                height:300px;
                padding:24px;
                margin:100px auto;
                
                
            }
            body {
             background:url(https://gd-hbimg.huaban.com/f5ae8fc719fc30e29fa3eee289d058e0a425b83474b03-qI3on6_fw1200);
             background-size:cover ;
            }
            .comment {
                text-align:center;
                color: aliceblue;
            }
            .shuo {
                width:20PX;
                height:20px;
                float: right;
            }
            .topic {
              color:rgb(254, 254, 255);
            }
            .box1 {
                width:400px;
                height:120PX;
                background-color: rgb(241, 221, 142);
                border-radius: 20px;
                display:flex;
                margin-top: 40px;
                
            }
            .box3 {
                width:400px;
                height:120PX;
                background-color: rgb(177, 212, 246);
                border-radius: 20px;
                display:flex;
               margin-top: 60px;
            }
            .box5 {
                width:400px;
                height:120PX;
                background-color: rgb(177, 212, 246);
                border-radius: 20px;
                display:flex;
               margin-top: 60px;
            }
           .icon {
            width:110px;
            height:100px;
            border-radius: 8px;
            margin:7px;
           }
           .icon2 {
            width:110px;
            height:100px;
            border-radius: 8px;
            margin:7px;
           }
           .box2 {
                width:400px;
                height:120PX;
                background-color: rgb(246, 246, 247);
                border-radius: 10px;
                display:flex;
           }
           .box6 {
                width:400px;
                height:120PX;
                background-color: rgb(246, 246, 247);
                border-radius: 10px;
                display:flex;
           }
           .img {
              width:80px;
              height:80px;
              margin: 10px;
           }
           .img2 {
              width:80px;
              height:80px;
              margin: 10px;
           }
           .word {
                width:40px;
                height:auto;
                margin-top:20px;
                padding:20PX;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="university">
          <h2 class="comment">推荐/关注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发现
          </h2>
        <h2 class="topic">#热门话题</h3>
        <a href="#section1">校园美食</a>
        <a href="#section2">校园风景照</a>
        <a href="#section3">如何高效学习</a>
        <a href="#section4">更多话题</a>
         <div class="box1"  id="section1">
            <img src="https://gd-hbimg.huaban.com/cfde8bab5a46eb554c27732d5d83247816709cc9f13f0-U3TEMY" class="icon">
            <ul>
           <li><h4>肥汁米线</h4></li> 
        <li><h5>价格:12.8元</h5></li>
        </ul>
         </div>
         <div class="box2">
            <h3>其他美食</h3>
            <img src="https://gd-hbimg.huaban.com/12e4af06542bcbab3aee846e8c04dd93af065d052eedc-5fqJ8s" class="img">
            <img src="https://gd-hbimg.huaban.com/2b7db2054b3ed3ddb6af7debe6b50ccaf0e4069456f25c-Epk3Tm" class="img">
            <img src="https://gd-hbimg.huaban.com/08d9562695a22f0930ec15449d2dd488b40808b11ffa4a-Yzr8ls" class="img">
         </div>
       <div class="box3" id="section2">
            <img src="https://gd-hbimg.huaban.com/0d9a4be18a2023bae07d0bd60740ba3cd5ba67e73051-9hZCw7_fw1200" class="icon2">
            <ul>
           <li><h3>同一片晚霞</h3></li> 
        <li><h5>2025.6.10</h5></li>
        </ul>
         </div>
         <div class="box2">
            <h3>美丽校园</h3>
            <img src="https://gd-hbimg.huaban.com/8a0ee57e34801ce7c3d416883b529c7f81a45b9c19822b-CYIUR7" class="img2">
            <img src="https://gd-hbimg.huaban.com/f2dbef9731bcf4cfe030536990c215b58dee1d045f698-tkFXZs_fw1200" class="img2">
            <img src="https://gd-hbimg.huaban.com/655c557da29fdb88d7cea43dc2540a3f46cbd30b51577-NCUubq" class="img2">
         </div>
          <div class="box5" id="section3">
            <img src="https://gd-hbimg.huaban.com/7aa7696944b13ffaf383de1f961470cc89fab26e89ce5-SkuBCm" class="icon2">
            <ul>
           <li><h3>如何高效学习</h3></li> 
        <li><h5>学霸笔记</h5></li>
        </ul>
         </div>
        <div class="box6">
            <h3>笔记分享</h3>
            <img src="https://gd-hbimg.huaban.com/fb4a5c16a3f226e60c55260688d2723e87575e153fa78-dlIBil" class="img">
            <img src="https://gd-hbimg.huaban.com/8ea7c834ce727b600d8aa7fe097029bc54b75e1f795b9-PWVzAA" class="img">
            <img src="https://gd-hbimg.huaban.com/8fe97ea29985d35aa2561341c54910d938d64f0865727-g2Akj8" class="img">
         </div>
         <h2 id="section4">更多话题尽情期待.....</h2>
        
        </div>
    </body>
</html>